<template>
	<div class="user-name-container">
		<span v-if="status === 'loading'">loading...</span>

		<template v-else-if="status === 'login'">
			<router-link
				:to="{
					name: 'User',
				}"
				class="user"
				>{{ user.name }}</router-link
			>
			<a @click="handleLogout">退出</a>
		</template>

		<router-link
			:to="{
				name: 'Login',
			}"
			v-else-if="status === 'logout'"
			exact-path
			>Login</router-link
		>
	</div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
	computed: {
		// mapGetters和mapState用于快速获取vuex的getters和state
		...mapGetters({
			status: "loginUser/status",
		}),
		// state() {
		// 	return this.$store.getters["loginUser/status"];
		// },
		...mapState("loginUser", ["user"]),
	},
	methods: {
		handleLogout() {
			this.$store.dispatch("loginUser/loginOut");
			this.$router.push({ name: "Login" });
		},
	},
};
</script>

<style>
.user-name-container .user {
	margin-right: 5px;
}
.user-name-container a {
	font-weight: bold;
	color: #2c3e50;
}
</style>
